<template>
  <div class="departments">
    <!-- card卡片盒子 -->
    <el-card class="mycard">
      <!-- tabs 结构 -->
      <el-tabs>
        <el-tab-pane label="组织结构"></el-tab-pane>
      </el-tabs>
      <!-- 中间内容区域 -->
      <div class="box">
        <!-- 结构头部 -->
        <treetools  @changeAddShow="openAdd" :istop="true" :item="topitem"></treetools>
        <hr />
        <!-- 树状结构部分 -->
        <el-tree :data="list" default-expand-all>
          <!--slot-scope 用来得到数据源，就是当前行的数据  -->
          <treetools
            @changeAddShow="openAdd"
            @changeEditShow="openEdit"
            @refreshData="getDepartments"
            slot-scope="{ data }"
            :item="data"
          ></treetools>
        </el-tree>
      </div>
      <addpanel
      ref="addpanel"
        :addshow="addshow"
        :currentObj="currentObj"
        @closeDialog="val => (addshow = val)"
        :updateData="getDepartments"
      ></addpanel>
    </el-card>
  </div>
</template>

<script>
//导入获取组织架构的方法
import { getDepartmentsApi } from '@/api/departments.js'
export default {
  data () {
    return {
      // 数据源
      list: [],
      topitem: { label: '传智教育' },
      //控制新增面板的显示与隐藏
      addshow: false,
      //当前操作的部门对象
      currentObj: {}
    }
  },
  methods: {
    //封装获取组织架构的方法
    async getDepartments () {
      //发送网络请求
      const res = await getDepartmentsApi()
      // console.log(res);
      //保存数据源
      this.list = this.trunData(res.data.depts, '')
      //保存顶部第一条数据不作改动
      this.topitem = { ...res.data.depts[0], manager: '负责人' }
    },
    //定义一个方法，进行转换res.data.data这个数组中的数据
    trunData (arr, pid) {
      //定义一个新数组，将原本并列的数据转换成树状结构
      var newArr = []
      arr.forEach(item => {
        if (item.pid === pid) {
          var children = this.trunData(arr, item.id)
          if (children.length > 0) {
            item.children = children
          }
          newArr.push(item)
        }
      })
      return newArr
    },
    //打开新增面板
    openAdd (item) {
      //打开面板
      this.addshow = true,
        //保存当前操作的部门对象
        this.currentObj = item
    },
    //打开编辑面板
    openEdit (item) {
      //(1)打开面板
      this.addshow = true,
        //保存当前操作的部门对象
        this.currentObj = item
        //调用子组件中的方法：来根据 id 得到当前部门对象
      this.$refs.addpanel.getItem(item.id)
    }
  },
  created () {
    //页面一打开就需要加载组织架构的数据
    this.getDepartments() 
  },
  components: {
    treetools: () => import('./components/tree-tools.vue'),
    addpanel: () => import('./components/addpanel.vue')
  }
}
</script>

<style lang="scss" scoped>
.departments {
  margin: 20px;
  .mycard {
    padding: 20px;
  }
  .box {
    width: 90%;
    margin: 0 auto;
    margin-top: 50px;
  }
}
</style>
